<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <title>[[${#site.title()}]]</title>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="~{assets/include :: scriptcss_default('')}"/>
  <link rel="stylesheet" th:href="@{/css/logo.css?_t=#buildtime#}">
  <link rel="stylesheet" th:href="@{/css/login.css?_t=#buildtime#}">

  <!--/* 若已登录，则直接进入系统 */-->
  <shiro:authenticated>
    <script type="text/javascript">
      window.location.href = '[[@{/index}]]';
    </script>
  </shiro:authenticated>
</head>
<body>
  <div id="app" v-cloak>
    <v-app>
      <!-- LOGO区域 -->
      <v-app-bar flat theme="dark" density="prominent" border="b-thin" color="transparent" v-show="!$vuetify.display.xs">
        <v-row>
          <v-col cols="12" class="d-flex flex-row pl-md-12">
            <v-img th:class="${#site.logo()}"></v-img>
          </v-col>
        </v-row>
      </v-app-bar>

      <!-- 主体 -->
      <v-main id="main">
        <v-container id="container" fluid class="d-flex align-center">
          <v-row style="z-index: 1">
            <v-col cols="12" sm="12" md="5" class="d-flex align-center justify-center font-weight-bold text-h5 text-md-h4" :class="{'text-lg-h3':isCN}">
              TYFast [[${#site.name()}]]
            </v-col>
            <v-col cols="12" sm="12" md="7" lg="7" class="d-flex justify-center">
              <v-card rounded="lg" class="login-form">
                <!-- 登录表单 -->
                <tform as="v-form" ref="dataForm" @submit="doLogin">
                  <div class="font-weight-bold text-h5 text-center login-title mt-8 mb-1 mt-md-16">[[#{用户登录}]]</div>
                  <v-row>
                    <v-col class="ml-12 mr-12">
                      <div class="text-red error-message">{{errorMessage}}</div>
                      <tfield v-model.trim="formData.loginName" name="用户名" v-slot="{ field, errors }" rules="required">
                        <v-text-field v-bind="field" variant="underlined" density="default" autofocus clearable :error-messages="errors" th:label="#{用户名}"></v-text-field>
                      </tfield>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col class="ml-12 mr-12">
                      <tfield v-model.trim="password" name="密码" v-slot="{ field, errors }" rules="required">
                        <v-text-field v-bind="field" variant="underlined" density="default" clearable type="password" :error-messages="errors" th:label="#{密码}"></v-text-field>
                      </tfield>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col class="ml-12 mr-12">
                      <v-btn :type="success? 'button':'submit'" color="primary" size="large" block :loading="posting">{{success? $t('登录成功') : $t('登录')}}</v-btn>
                    </v-col>
                  </v-row>
                  <v-row class="ma-0">
                    <v-col cols="12" class="text-center pl-0 pr-0 pb-0">
                      <v-item-group mandatory v-model="lang" @update:model-value="switchLang">
                        <v-item v-slot="{isSelected,toggle}" v-for="lang in langList" :value="lang.value">
                          <v-btn variant="text" :color="isSelected? '' : 'indigo accent-4'" @click="toggle">{{lang.text}}</v-btn>
                        </v-item>
                      </v-item-group>
                    </v-col>
                    <v-col class="py-0 pl-12">
                      <div th:if="${weixin}" class="bg-weixin pl-7 pb-1 text-subtitle-2" @click="forwardWx">{{$t('微信')}}</div>
                    </v-col>
                  </v-row>
                </tform>
              </v-card>
            </v-col>
          </v-row>

          <div class="login-overlay"></div>
        </v-container>
      </v-main>

      <!-- 版权声明 -->
      <v-footer app color="transparent" v-show="!$vuetify.display.xs">
        <div class="login-footer text-center">
          Copyright © [[${#site.copyright()}]] All Rights Reserved. 版权所有
          <br/>
          [[${#site.icp()}]]
        </div>
      </v-footer>
    </v-app>
  </div>

  <!-- 星链接果 -->
  <div id="particles-js" style="position: absolute; top: 0; width:100%; height:99%;"></div>
  <script type="text/javascript" th:src="@{/js/lib/particles.min.js}"></script>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/login.js?_t=#buildtime#}"></script>
</body>
</html>